<template>
  <view class="appointment-container">
    <status-bar bgColor="#0088ff"></status-bar>
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="goBack">
        <image src="/static/images/icon/backward_flat.png" class="back-icon-img"></image>
      </view>
      <view class="nav-title">预约上门时间</view>
    </view>
    
    <!-- 客户信息区域 -->
    <view class="customer-info-section">
      <view class="customer-header">
        <view class="customer-icon">
          <uni-icons type="person" size="24" color="#666"></uni-icons>
        </view>
        <text class="section-title">联系客户</text>
      </view>
      
      <view class="customer-detail">
		<view class="customer-name-area">
          <text class="customer-name">{{orderInfo.ownerName}} {{orderInfo.ownerPhone}}</text>
		  <view class="customer-copy-btn" @click="copyCustomerInfo()">复制</view>
		</view>
        <view class="customer-address">
          <text>{{orderInfo.ownerProvincial}}  {{ orderInfo.ownerCity }} {{orderInfo.ownerCounty}} {{ orderInfo.ownerAddress }}</text>
        </view>
        <view class="action-buttons">
          <button class="action-btn copy-btn" @tap="showDialog = true" >
            <text>修改电话</text>
          </button>
		  <phoneEditDialog 
		        :visible="showDialog" 
				@update:visible="val => showDialog = val"
		        @confirm="onConfirm"
		        @cancel="onCancel"
		      />
          <button class="action-btn call-btn" @click="callCustomer">
            <text>拨打电话</text>
          </button>
        </view>
      </view>
    </view>
	
	<!-- 安装明细区域 -->
	<view class="install-info-section" v-if="installationData.length > 0">
		<view class="section-header">
		  <text class="section-title">安装明细</text>
		</view>
		
		<view class="data-item" v-for="(item, index) in installationData" :key="index">
		  <!-- 房间图标和信息 -->
		  <view class="room-info">
		    <!-- <view class="room-icon-container">
		      <image :src="item.roomIcon" class="room-icon"></image>
		      <text class="room-label">{{item.roomLabel}}</text>
		    </view> -->
		    
		    <view class="room-details">
		      <view class="room-name">{{item.roomNo}}</view>
			  <view class="product-info">
			    <text class="product-name">{{getWindowTypeName(item.windowType)}}</text>
			  </view>
		      <view class="product-info">
		        <text class="product-name">{{getProductTypeName(item.productType)}}</text>
		      </view>
		      <view class="size-info">
		        <text class="size-text">宽度：{{item.windowWidth}}</text>
		      </view>
		      <view class="size-info">
		        <text class="size-text">高度：{{item.windowHeight}}</text>
		      </view>
		    </view>
		  </view>
		  
		  <!-- 费用信息 -->
		  <view class="cost-info">
        <view >   
           <text class="cost-label">安装费用：</text>
		       <text class="cost-value">¥ {{item.masterInstallFee}}</text>
        </view>


		    <view v-for="(citem, cindex) in item.additionalFeeList" :key="cindex" >   
           <text class="cost-label">{{ citem.projectNameTemp }}： </text>
		       <text class="cost-value">¥ {{citem.discountMasterFeeTemp}}</text>
        </view>
		  </view>

		</view>
	</view>
	
<view class="install-info-section" v-if="masterSubsidy">
		<view class="section-header">
		  <text class="section-title">补贴费用</text>
		</view>
		<text class="cost-value"> ￥ {{masterSubsidy}}</text>
	</view>

	<view class="install-info-section" v-if="orderNotes">
		<view class="section-header">
		  <text class="section-title">订单备注</text>
		</view>
		<text class="order-notes">{{orderNotes}}</text>
	</view>
    
    <!-- 预约结果选择 -->
    <view class="appointment-result-section">
      <view class="section-header">
        <text class="section-title">选择预约结果<text class="required">*</text></text>
      </view>
      
      <view class="result-options">
        <view 
          class="result-option" 
          :class="{ active: appointmentResult === 'normal' }" 
          @click="selectResult('normal')"
        >
          <view class="option-content">
            <text class="option-title">预约正常</text>
            <text class="option-desc">上门时间已确定</text>
          </view>
          <view class="check-icon" v-if="appointmentResult === 'normal'">
            <uni-icons type="checkmarkempty" size="20" color="#0088ff"></uni-icons>
          </view>
        </view>
        
        <view 
          class="result-option" 
          :class="{ active: appointmentResult === 'abnormal' }" 
          @click="selectResult('abnormal')"
        >
          <view class="option-content">
            <text class="option-title">预约异常</text>
            <text class="option-desc">上门时间未确定</text>
          </view>
          <view class="check-icon" v-if="appointmentResult === 'abnormal'">
            <uni-icons type="checkmarkempty" size="20" color="#0088ff"></uni-icons>
          </view>
        </view>
        
        <view 
          class="result-option" 
          :class="{ active: appointmentResult === 'refused' }" 
          @click="selectResult('refused')"
        >
          <view class="option-content">
            <text class="option-title">拒绝接单</text>
            <text class="option-desc">个人原因</text>
          </view>
          <view class="check-icon" v-if="appointmentResult === 'refused'">
            <uni-icons type="checkmarkempty" size="20" color="#0088ff"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 预约时间选择 -->
    <view class="appointment-time-section" v-if="appointmentResult === 'normal'">
      <view class="section-header">
        <text class="section-title">预约时间<text class="required">*</text></text>
      </view>
      
      <view class="time-selector" @click="showDateTimePicker">
        <text>{{formattedAppointmentTime || '请选择预约时间'}}</text>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
    </view>
    
    <!-- 备注信息 -->
    <view class="remark-section">
      <view class="section-header">
        <text class="section-title">备注</text>
      </view>
      
      <view class="remark-input">
        <textarea 
          placeholder="请输入备注（非必填）" 
          v-model="remark" 
          maxlength="200"
          placeholder-style="color: #999;"
        ></textarea>
      </view>
    </view>
    
    <!-- 底部提交按钮 -->
    <view class="submit-btn-container">
      <button class="cancel-btn" @click="cancel">取消</button>
      <button class="submit-btn" @click="submitAppointment">提交</button>
    </view>
    
    <!-- 日期时间选择弹出框 -->
    <uni-popup ref="dateTimePopup" type="bottom">
      <view class="datetime-picker-container">
        <view class="picker-header">
          <text class="picker-title">选择日期和时间</text>
          <view class="selected-time">{{formattedAppointmentTime}}</view>
        </view>
        
        <view class="picker-body">
          <picker-view 
            :indicator-style="'height: 50px;'" 
            :value="pickerValue" 
            @change="onPickerChange"
            class="picker-view"
          >
            <!-- 年份选择列 -->
            <picker-view-column>
              <view class="picker-item" v-for="(year, index) in years" :key="'year-'+index">
                {{year}}
              </view>
            </picker-view-column>
            
            <!-- 月份选择列 -->
            <picker-view-column>
              <view class="picker-item" v-for="(month, index) in months" :key="'month-'+index">
                {{month}}
              </view>
            </picker-view-column>
            
            <!-- 日期选择列 -->
            <picker-view-column>
              <view class="picker-item" v-for="(day, index) in days" :key="'day-'+index">
                {{day}}
              </view>
            </picker-view-column>
            
            <!-- 小时选择列 -->
            <picker-view-column>
              <view class="picker-item" v-for="(hour, index) in hours" :key="'hour-'+index">
                {{hour}}
              </view>
            </picker-view-column>
            
            <!-- 分钟选择列 -->
            <picker-view-column>
              <view class="picker-item" v-for="(minute, index) in minutes" :key="'minute-'+index">
                {{minute}}
              </view>
            </picker-view-column>
          </picker-view>
        </view>
        
        <view class="picker-footer">
          <button class="picker-btn cancel-picker-btn" @click="cancelDateTimePicker">取消</button>
          <button class="picker-btn confirm-picker-btn" @click="confirmDateTimePicker">确定</button>
        </view>
        
        <view class="picker-info">
          <text>精确时间：{{formattedAppointmentTime}}</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
import { getOrderInfo, editOrder, modifyOrderPhone } from '@/api/app/master/order'
import { getOrderDataList } from '@/api/app/master/order'
import { confgiList } from '@/api/app/master/common'
import phoneEditDialog from '@/components/phone-edit-dialog.vue'

export default {
  components: {
    uniPopup,
	phoneEditDialog
  },
  data() {
    // 获取当前日期和时间
    const now = new Date();
    const currentYear = now.getFullYear();
    const currentMonth = now.getMonth() + 1;
    const currentDay = now.getDate();
    const currentHour = now.getHours();
    const currentMinute = now.getMinutes();
    
    return {
      // 订单ID
      orderId: null,
      // 订单详情
      orderInfo: {},
      // 客户信息
      customerName: '',
      customerPhone: '',
      customerAddress: '',
	  orderNotes: "",
    masterSubsidy: '',
	  installationData: [],
	  windowType: [],
	  productType: [],
      
      // 预约结果
      appointmentResult: 'normal', // normal: 预约正常, abnormal: 预约异常, refused: 拒绝接单
      
      // 预约时间
      appointmentTime: now,
      formattedAppointmentTime: this.formatDateTime(now),
      
      // 备注
      remark: undefined,
      
      // 日期时间选择器数据
      years: this.generateYears(currentYear - 1, currentYear + 2),
      months: this.generateMonths(),
      days: this.generateDays(currentYear, currentMonth),
      hours: this.generateHours(),
      minutes: this.generateMinutes(),
      
      // 选择器当前值
      pickerValue: [1, currentMonth - 1, currentDay - 1, currentHour, Math.floor(currentMinute / 15) * 15],
      
      // 临时存储选择的日期时间
      tempDateTime: null,
	  showDialog: false
    }
  },
  onLoad(options) {
    // 获取传递过来的订单ID
    if (options.id) {
      this.orderId = options.id;
      // 获取订单详情
      this.getOrderDetail();
    } else {
      uni.showToast({
        title: '订单ID不存在',
        icon: 'none'
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  },
  methods: {
    // 获取订单详情
    getOrderDetail() {
      uni.showLoading({
        title: '加载中...'
      });
      
      getOrderInfo( this.orderId )
        .then(res => {
          if (res.code === 200) {
            this.orderInfo = res.data;
            // 更新客户信息
            this.updateCustomerInfo();
			// 获取安装数据
			this.getInstallationData();
          } else {
            uni.showToast({
              title: res.msg || '获取订单详情失败',
              icon: 'none'
            });
          }
        })
        .catch(err => {
          console.error('获取订单详情失败:', err);
          uni.showToast({
            title: '获取订单详情失败',
            icon: 'none'
          });
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    
    // 更新客户信息
    updateCustomerInfo() {
      if (this.orderInfo) {
        // 根据实际接口返回的数据结构进行赋值
        // 这里假设接口返回的数据结构中包含customerName, customerPhone, customerAddress等字段
        this.customerName = this.orderInfo.customerName || '';
        this.customerPhone = this.orderInfo.customerPhone || '';
        this.customerAddress = this.orderInfo.customerAddress || '';
        this.orderNotes = this.orderInfo.orderNotes;
        this.masterSubsidy = this.orderInfo.masterSubsidy;
      }
    },
	
	// 获取安装数据
	getInstallationData() {
	  if (this.orderInfo.orderType !== '2' || !this.orderInfo.id) {
	    return;
	  }
	  // 获取窗户类型
	  this.getWindowTypeData();
	   // 获取产品类型  
	  this.getProductTypeData();
	  
	  getOrderDataList(this.orderInfo.id)
	    .then(res => {
	      if (res.code === 200) {
	        // 处理接口返回的数据
	        this.processInstallationData(res.data.orderDataList);
	      }
	    })
	    .catch(err => {
	      console.error('获取安装数据失败:', err);
	    });
	},
	
	// 处理安装数据
	processInstallationData(data) {
	  if (!data || !Array.isArray(data)) {
	    this.installationData = [];
	    return;
	  }
	  
	  // 将接口数据转换为页面需要的格式
	  this.installationData = data.map((item, index) => {
	    return {
	      id: item.id ,
	      roomNo: item.roomNo || '',
	      productType: item.productType || '',
	      installFee: item.installFee || '',
	      windowWidth: item.windowWidth || '',
	      windowHeight: item.windowHeight || '',
	      masterOrderDataFee: item.masterOrderDataFee || '',
	
	      windowType: item.windowType || '',
	      // roomLabel: this.getRoomLabel(item.roomName),
	      // roomIcon: this.getRoomIcon(item.roomName),
	      productName: item.productName || '未知产品',
	      width: item.width ? `${item.width}CM` : '0CM',
	      height: item.height ? `${item.height}CM` : '0CM',
	      cost: item.cost || '0',

        masterInstallFee: item.masterInstallFee || '0',
        masterAdditionalFee: item.masterAdditionalFee || '0',
        additionalFeeList: item.additionalFeeList || [],

	    };
	  });
	},
	
	getWindowTypeData() {
	  confgiList({
	    parentSign:'windowType'
	  })
	    .then(res => {
	      if (res && res.code === 200) {
	        this.windowType = Array.isArray(res.data) ? res.data : [];
	      } else {
	        this.windowType = [];
	      }
	    })
	    .catch(() => {
	      this.windowType = [];
	    });
	},
	
	getWindowTypeName(val){
	    for(let i=0;i<this.windowType.length;i++){
	        if(this.windowType[i].paramValue==val){ 
	            return this.windowType[i].paramName;
	        }
	    }
	    return '';
	},
	
	
	getProductTypeData() {
	  confgiList({
	    parentSign:'productType'
	  })
	    .then(res => {
	      if (res && res.code === 200) {
	        this.productType = Array.isArray(res.data) ? res.data : [];
	      } else {
	        this.productType = [];
	      }
	    })
	    .catch(() => {
	      this.productType = [];
	    });
	},
	
	getProductTypeName(val){
	    for(let i=0;i<this.productType.length;i++){
	        if(this.productType[i].paramValue==val){ 
	            return this.productType[i].paramName;
	        }
	    }
	    return '';
	},
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 复制地址
    copyAddress() {
      uni.setClipboardData({
        data: this.customerAddress,
        success: () => {
          uni.showToast({
            title: '地址已复制',
            icon: 'success'
          });
        }
      });
    },
	
	copyCustomerInfo() {
	  const result = `姓名：${this.orderInfo.ownerName}\n电话：${this.orderInfo.ownerPhone}\n地址：${this.orderInfo.ownerProvincial + this.orderInfo.ownerCity + this.orderInfo.ownerCounty + this.orderInfo.ownerAddress}`;
	  uni.setClipboardData({
	    data: result,
	    success: () => {
	      uni.showToast({
	        title: '客户信息已复制',
	        icon: 'success'
	      });
	    }
	  });
	},
	
	onConfirm(phone) {
            uni.showLoading({
			  title: '修改中...'
			});
			
			modifyOrderPhone(this.orderId, phone).then(response =>{
				console.log(response)
				uni.hideLoading();
				if (response.code === 200) {
				  uni.showToast({
				    title: '修改成功',
				    icon: 'success'
				  });
				  this.orderInfo.ownerPhone = phone;
				} else {
				  uni.showToast({
				    title: response.msg || '修改失败',
				    icon: 'none'
				  });
				}
			}).catch(error =>{
				uni.hideLoading();
				console.error('修改手机号失败:', error);
				uni.showToast({
				  title: '网络错误，请重试',
				  icon: 'none'
				});
			}); 
	},
	
	onCancel() {
	      console.log('取消修改电话')
	    },
    
    // 拨打客户电话
    callCustomer() {
      // 使用订单详情中的真实电话号码
      const phoneNumber = this.orderInfo.ownerPhone || ''; 
      
      uni.showModal({
        title: '拨打电话',
        content: `确定要拨打 ${this.orderInfo.ownerPhone} 电话吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: phoneNumber,
              fail: () => {
                uni.showToast({
                  title: '拨打电话失败',
                  icon: 'none'
                });
              }
            });
          }
        }
      });
    },
    
    // 选择预约结果
    selectResult(result) {
      console.log(result);
      this.appointmentResult = result;
    },
    
    // 显示日期时间选择器
    showDateTimePicker() {
      // 保存当前选择的日期时间，以便在取消时恢复
      this.tempDateTime = new Date(this.appointmentTime);
      
      // 打开弹出框
      this.$refs.dateTimePopup.open();
    },
    
    // 取消日期时间选择
    cancelDateTimePicker() {
      // 恢复之前的选择
      if (this.tempDateTime) {
        this.appointmentTime = new Date(this.tempDateTime);
        this.updatePickerValue();
      }
      
      // 关闭弹出框
      this.$refs.dateTimePopup.close();
    },
    
    // 确认日期时间选择
    confirmDateTimePicker() {
      // 更新预约时间
      const year = this.years[this.pickerValue[0]];
      const month = parseInt(this.months[this.pickerValue[1]]);
      const day = parseInt(this.days[this.pickerValue[2]]);
      const hour = parseInt(this.hours[this.pickerValue[3]]);
      const minute = parseInt(this.minutes[this.pickerValue[4]]);
      
      this.appointmentTime = new Date(year, month - 1, day, hour, minute);
      this.formattedAppointmentTime = this.formatDateTime(this.appointmentTime);
      
      // 关闭弹出框
      this.$refs.dateTimePopup.close();
    },
    
    // 选择器值变化处理
    onPickerChange(e) {
      const values = e.detail.value;
      
      // 更新选择器值
      this.pickerValue = values;
      
      // 检查月份和年份是否变化，如果变化则需要重新生成天数
      const year = this.years[values[0]];
      const month = parseInt(this.months[values[1]]);
      
      // 重新生成天数
      this.days = this.generateDays(year, month);
      
      // 如果选择的天数超出了当月的最大天数，则调整为当月的最后一天
      if (values[2] >= this.days.length) {
        this.pickerValue[2] = this.days.length - 1;
      }
      
      // 更新临时日期时间
      const day = parseInt(this.days[this.pickerValue[2]]);
      const hour = parseInt(this.hours[this.pickerValue[3]]);
      const minute = parseInt(this.minutes[this.pickerValue[4]]);
      
      this.tempDateTime = new Date(year, month - 1, day, hour, minute);
      this.formattedAppointmentTime = this.formatDateTime(this.tempDateTime);
    },
    
    // 更新选择器值
    updatePickerValue() {
      const date = this.appointmentTime;
      
      // 找到对应的索引
      const yearIndex = this.years.findIndex(y => y === date.getFullYear());
      const monthIndex = date.getMonth();
      const dayIndex = date.getDate() - 1;
      const hourIndex = date.getHours();
      const minuteIndex = Math.floor(date.getMinutes() / 15);
      
      this.pickerValue = [
        yearIndex >= 0 ? yearIndex : 0,
        monthIndex,
        dayIndex,
        hourIndex,
        minuteIndex
      ];
    },
    
    // 生成年份数组
    generateYears(start, end) {
      const years = [];
      for (let i = start; i <= end; i++) {
        years.push(i);
      }
      return years;
    },
    
    // 生成月份数组
    generateMonths() {
      const months = [];
      for (let i = 1; i <= 12; i++) {
        months.push(i.toString().padStart(2, '0'));
      }
      return months;
    },
    
    // 生成天数数组
    generateDays(year, month) {
      const daysInMonth = new Date(year, month, 0).getDate();
      const days = [];
      for (let i = 1; i <= daysInMonth; i++) {
        days.push(i.toString().padStart(2, '0'));
      }
      return days;
    },
    
    // 生成小时数组
    generateHours() {
      const hours = [];
      for (let i = 0; i < 24; i++) {
        hours.push(i.toString().padStart(2, '0'));
      }
      return hours;
    },
    
    // 生成分钟数组
    generateMinutes() {
      const minutes = [];
      for (let i = 0; i < 60; i += 15) {
        minutes.push(i.toString().padStart(2, '0'));
      }
      return minutes;
    },
    
    // 格式化日期时间
    formatDateTime(date) {
      if (!date) return '';
      
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hour = date.getHours().toString().padStart(2, '0');
      const minute = date.getMinutes().toString().padStart(2, '0');
      
      return `${year}-${month}-${day} ${hour}:${minute}`;
    },
    
    // 取消预约
    cancel() {
      uni.showModal({
        title: '取消预约',
        content: '确定要取消预约吗？',
        success: (res) => {
          if (res.confirm) {
            uni.navigateBack();
          }
        }
      });
    },
    
    // 提交预约
    submitAppointment() {
      // 验证必填项
      if (this.appointmentResult === 'normal' && !this.formattedAppointmentTime) {
        uni.showToast({
          title: '请选择预约时间',
          icon: 'none'
        });
        return;
      }
      if (this.appointmentResult === 'abnormal' && !this.remark) {
        uni.showToast({
          title: '请填写异常原因',
          icon: 'none'
        });
        return;
      }
      if (this.appointmentResult === 'refused' && !this.remark) {
        uni.showToast({
          title: '请填写拒单原因',
          icon: 'none'
        });
        return;
      }


      let appointmentData = {};
      // 正常预约提交表单
      if (this.appointmentResult === 'normal') {
          appointmentData = {
                  id: this.orderId,
                  reservationTime: this.appointmentResult === 'normal' ? this.formattedAppointmentTime+":00" : '',
                  reason: this.remark,
                  orderStatus: '3',
                  operateType: 6
                };
      }else if (this.appointmentResult === 'refused') {
              appointmentData = {
                  id: this.orderId,
                  // reservationTime: this.appointmentResult === 'normal' ? this.formattedAppointmentTime+":00" : '',
                  reason : this.remark,
                  orderStatus: '1',
                  operateType: 4
                };

      }else if(this.appointmentResult === 'abnormal'){
        appointmentData = {
                  id: this.orderId,
                  // reservationTime: this.appointmentResult === 'normal' ? this.formattedAppointmentTime+":00" : '',
                  reason : this.remark,
                  orderStatus: '99',
                  operateType: 8
                };
      }
      
      
      // 显示提交中
      uni.showLoading({
        title: '提交中...'
      });
      
      // 调用编辑订单接口
      editOrder(appointmentData)
        .then(res => {
          uni.hideLoading();
          
          if (res.code === 200) {
            // 提交成功
            uni.showToast({
              title: '预约成功',
              icon: 'success'
            });
            
            // 发送全局事件，通知work页面刷新数据
            uni.$emit('refreshWorkOrders');
            
            // 返回work页面
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/index/work'
              });
            }, 1500);
          } else {
            // 提交失败
            uni.showToast({
              title: res.msg || '预约失败',
              icon: 'none'
            });
          }
        })
        .catch(err => {
          uni.hideLoading();
          console.error('预约提交失败:', err);
          
          uni.showToast({
            title: '预约失败，请稍后重试',
            icon: 'none'
          });
        });
      
      console.log('提交预约数据:', appointmentData);
    }
  }
}
</script>

<style lang="scss" scoped>
.appointment-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #0088ff;
  color: #fff;
  padding: 0 30rpx;
  position: relative;
}

.back-btn {
  position: absolute;
  left: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon-img {
  width: 40rpx;
  height: 40rpx;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
}

/* 通用样式 */
.section-header {
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.required {
  color: #ff0000;
  margin-left: 4rpx;
}

/* 客户信息区域 */
.customer-info-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.customer-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.customer-icon {
  margin-right: 10rpx;
}

.customer-detail {
  padding: 20rpx;
  background-color: #f9f9f9;
  border-radius: 10rpx;
}

.customer-name-area {
	display: flex;
	justify-content: space-between;
	align-items: center; 
	margin-bottom: 10rpx;
}

.customer-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.customer-copy-btn {
  background-color: #f0f0f0;
  color: #666;
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
}

.customer-address {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 20rpx;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
}

.action-btn {
  flex: 1;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  border-radius: 35rpx;
  font-size: 28rpx;
  margin: 0 10rpx;
  padding: 0;
}

.copy-btn {
  background-color: #f0f0f0;
  color: #666;
}

.call-btn {
  background-color: #0088ff;
  color: #fff;
}

/* 安装明细区域 */
.install-info-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

/* 数据列表 */
.data-list {
  padding: 20rpx;
}

.data-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 房间信息 */
.room-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.room-icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 30rpx;
  min-width: 120rpx;
}

.room-icon {
  width: 80rpx;
  height: 80rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  background-color: #f8f8f8;
  margin-bottom: 10rpx;
}

.room-label {
  font-size: 24rpx;
  color: #999;
  text-align: center;
}

.room-details {
  flex: 1;
}

.room-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.product-info {
  margin-bottom: 6rpx;
}

.product-name {
  font-size: 28rpx;
  color: #666;
}

.size-info {
  margin-bottom: 4rpx;
}

.size-text {
  font-size: 26rpx;
  color: #888;
}

/* 费用信息 */
.cost-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 160rpx;
  justify-content: center;
  gap: 10rpx;
}

.cost-label {
  font-size: 28rpx;
  color: #666;
  margin-right: 8rpx;
}

.cost-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff3b30;
  margin-right: 15rpx;
}

.arrow-icon {
  width: 24rpx;
  height: 24rpx;
  opacity: 0.4;
}

/* 预约结果选择 */
.appointment-result-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.result-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.result-option {
  width: 31%;
  height: 160rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 10rpx;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  margin-bottom: 20rpx;
}

.result-option.active {
  border-color: #0088ff;
  background-color: rgba(0, 136, 255, 0.05);
}

.option-content {
  display: flex;
  flex-direction: column;
}

.option-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.option-desc {
  font-size: 24rpx;
  color: #999;
}

.check-icon {
  position: absolute;
  right: 10rpx;
  bottom: 10rpx;
}

/* 预约时间选择 */
.appointment-time-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.time-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  padding: 0 20rpx;
  background-color: #f9f9f9;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #333;
}

/* 备注信息 */
.remark-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.remark-input {
  background-color: #f9f9f9;
  border-radius: 10rpx;
  padding: 20rpx;
}

.remark-input textarea {
  width: 100%;
  height: 200rpx;
  font-size: 28rpx;
}

/* 底部提交按钮 */
.submit-btn-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.cancel-btn, .submit-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 32rpx;
  margin: 0 10rpx;
}

.cancel-btn {
  background-color: #f0f0f0;
  color: #666;
}

.submit-btn {
  background-color: #0088ff;
  color: #fff;
}

/* 日期时间选择器弹出框 */
.datetime-picker-container {
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  overflow: hidden;
}

.picker-header {
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid #f0f0f0;
}

.picker-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.selected-time {
  font-size: 28rpx;
  color: #0088ff;
}

.picker-body {
  height: 500rpx;
  position: relative;
}

.picker-view {
  width: 100%;
  height: 100%;
}

.picker-item {
  line-height: 50px;
  text-align: center;
  font-size: 28rpx;
}

.picker-footer {
  display: flex;
  border-top: 1rpx solid #f0f0f0;
}

.picker-btn {
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 32rpx;
}

.cancel-picker-btn {
  background-color: #f5f5f5;
  color: #666;
}

.confirm-picker-btn {
  background-color: #0088ff;
  color: #fff;
}

.picker-info {
  padding: 20rpx;
  text-align: center;
  font-size: 24rpx;
  color: #999;
  background-color: #f9f9f9;
}

.custom-dialog {
  width: 600rpx;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.dialog-header {
  padding: 40rpx 30rpx 30rpx;
  text-align: center;
  border-bottom: 1rpx solid #f5f5f5;
}

.dialog-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.dialog-body {
  padding: 40rpx 30rpx;
}

.input-field {
  border: 1rpx solid #e0e0e0;
  padding: 24rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  width: 100%;
  box-sizing: border-box;
}

.dialog-footer {
  display: flex;
  border-top: 1rpx solid #f5f5f5;
}

.btn {
  flex: 1;
  border: none;
  border-radius: 0;
  padding: 30rpx;
  font-size: 28rpx;
  background: none;
  line-height: normal;
}

.cancel {
  color: #666;
  border-right: 1rpx solid #f5f5f5;
}

.confirm {
  color: #007AFF;
  font-weight: 500;
}

.order-notes {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}
</style>